<template>
  <div>
    <div
      v-for="(item, index) in image_type_list"
      :key="index"
      :class="item.Class"
      @click="select_type(item, index)"
      ><div>{{ item.name }}</div>
      <div style="position: absolute; left: 70%" v-if="item.name != '全部'">
        <el-button
          @click="type_Delete(item)"
          style="border: none; background: white"
          :icon="Delete"
          size="small"
        />
      </div>
    </div>
    <div class="left_all">
      <div v-if="data.show"
        ><a-input bordered="false" maxlength="6" @pressEnter="search" v-model="data.form.name"
      /></div>
      <div v-else @click="data.show = true">+ 添加分组</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue';
  import { onMounted, ref } from 'vue';
  import { adminStore } from '/@/store/locality/admin';
  import { Delete } from '@element-plus/icons-vue';

  const ADStore = adminStore();

  let $emit = defineEmits(['onReturn']);
  var index_type: any = ref(0);
  let props: any = defineProps(['image_type_list']);

  const data: any = ref({
    form: {
      name: '',
      type: 'pc',
      other: '',
    },
    show: false,
  });

  async function type_Delete(item) {
    const res = await ADStore.filemanage_group_delete({
      id: item.id,
    });

    if (res.code == 200) {
      $emit('onReturn', 'add', '');
      message.success(res.message);
    }
  }

  async function search(item) {
    if (item.target.value) {
      data.value.form.name = item.target.value;
      data.value.show = false;
      const res = await ADStore.filemanage_group_add(data.value.form);
      if (res.code == 200) {
        $emit('onReturn', 'add', '');

        message.success(res.message);
      } else message.error(res.message);
    } else {
      message.info('分组不能为空!');
    }
  }

  function select_type(item, index) {
    var Data: any = props.image_type_list;
    Data[index_type.value].Class = 'left_all';
    item.Class = 'left_all_active';
    index_type.value = index;
    $emit('onReturn', 'image', item);
  }

  onMounted(() => {
    console.log(props.image_type_list);
  });
</script>
<style scoped>
  .left_all {
    display: flex;
    align-items: center;

    /* justify-content: center; */
    width: 100%;
    padding: 15px;

    /* background-color: #7d98b6; */

    /* color: white; */
  }

  .left_all_active {
    display: flex;
    align-items: center;

    /* justify-content: center; */
    width: 100%;
    padding: 10px 15px;
    animation: fadenum1 0.5s 1;
    border-radius: 6px;
    background-color: #0960bd;
    color: white;
  }

  @keyframes fadenum1 {
    0% {
      background-color: #4b7fb6;
    }

    100% {
      background-color: #0960bd;
    }
  }
</style>
